<template>
	<view class="browse_box" :style="{'padding-bottom': type == true ? '150rpx' : '50rpx'}">
		<view class="date_list_box">
			<view class="header_date_box flexjus" v-if="browsetList.length != 0">
				<!-- <view class="left_date_txt s32 family f500">
					今天
				</view> -->
				<view class="edit_txt s32 family f500" @click="edit">
					编辑
				</view>
			</view>
			<view class="goods_list_box flex" v-for="(item,index) in browsetList" :key="index" @click="goodsDetail(item.goods_id,item.sku_id)">
				<label class="radio" @click.stop="goodsCheck(index)" v-if="type">
					<radio color="#EBBE87" style="transform: scale(0.8);margin-top: 58rpx;margin-left: 46rpx;"
						value="r1" :checked="item.checked" />
				</label>
				<view class="goods_image">
					<image class="img" :src="item.sku.thumbnail?item.sku.thumbnail:item.goods.image_src" mode=""></image>
				</view>
				<view class="goods_detail">
					<view class="goods_title s28 familythree f400">
						{{spceType(item.goods.title,item.sku?item.sku.difference:'',item.goods.spec_type)}}
					</view>
					<view class="bottom_price_cart flexjus">
						<view class="price_txt s36 familytow fblod">
							<text class="s22 familytow fblod" style="color: #000;">￥</text>
							<text v-if="item.sku">{{item.sku.price}}</text>
							<text v-else>{{item.goods.price}}</text>
						</view>
						<view class="cart_icon">
							<image class="w100 h100" src="/pages/filePages/static/sc_cart.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_box flex" :style="{'height': flag == true ? '166rpx' : '98rpx'}" v-if="type && browsetList.length != 0">
			<label class="radio_bot" @click="allCheck">
				<radio color="#EBBE87" style="transform: scale(0.8);" value="r1" :checked="allChecked" />
			</label>
			<view class="all_checked s36 family f500">
				全选
			</view>
			<view class="del_btn s28 family f500 txtali" @click="delBtn">
				删除
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: false,
				flag: false,
				allChecked: false,
				browsetList: [],
				page: 1
			}
		},
		onLoad() {
			this.getBrowseList()
		},
		onShow() {
			this.flag = this.bottomNav()
		},
		methods: {
			// 获取记录列表
			getBrowseList() {
				let list = [],
					that = this;
				this.$request({
					url: 'product/footprint',
					data: {
						type: 'goods'
					}
				}).then(res => {
					this.browsetList = res.data.data.data.map((item, index) => {
						item.checked = false
						return item
					})
					this.$store.commit("setBrowseList", {
						key: 'setBrowseList',
						data: this.browsetList
					})
				})
			},
			goodsCheck(index) {
				let flag = 0,
					that = this;
				that.browsetList[index].checked = !that.browsetList[index].checked
				for (let s of that.browsetList) {
					if (s.checked) {
						flag++;
					}
				}
				that.allChecked = flag >= that.browsetList.length ? true : false
			},
			goodsDetail(id,sku_id='') {
				uni.navigateTo({
					url: '/pages/filePages/goodsDetail/goodsDetail?id='+id + '&type=' + 0+'&sku_id='+sku_id
				})
			},
			allCheck() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.editAll(true)
				} else {
					this.editAll(false)
				}

			},
			editAll(type) {
				this.browsetList.map((item, index) => {
					item.checked = type
				})
			},
			// 编辑记录
			edit() {
				this.type = !this.type
			},
			delBtn(){
				const ids = this.browsetList.filter(item => item.checked).map(item => item.id)
				if(ids.length <= 0){
					uni.showToast({
						title: "请选择商品",
						icon: "none"
					})
					return false
				}
				
				let that = this
				that.$request({
					url: 'product/delbrowse',
					data: {
						ids: ids.toString()
					}
				}).then(res => {
					if(res.data.code == 1){
						uni.showToast({
							title: "删除成功",
							icon: "none"
						})
						that.getBrowseList()
						// 更新用户信息
						that.$getUserInfo()
					}
					that.type = !that.type
				})
			}
		}
		
	}
</script>

<style scoped lang="scss">
	.browse_box {
		overflow: hidden;
		width: 100%;
		background-color: #FFFFFF;

		.bottom_box {
			width: 750upx;
			height: 98upx;
			background: #FFFFFF;
			box-shadow: 0upx -8upx 18upx 2upx rgba(0, 0, 0, 0.05);
			position: fixed;
			bottom: 0;

			.radio_bot {
				margin-left: 40upx;
				margin-top: 26upx;
			}

			.all_checked {
				color: #333333;
				margin-top: 24upx;
				margin-left: 14upx;
			}

			.del_btn {
				width: 188upx;
				height: 72upx;
				background: #EBBE87;
				border-radius: 40upx;
				line-height: 72upx;
				color: #FFFFFF;
				margin-top: 16upx;
				margin-left: 345upx;
			}
		}

		.date_list_box {
			margin-top: 20upx;

			.header_date_box {
				width: 686upx;
				height: 88upx;
				line-height: 88upx;
				background: #FFFFFF;
				padding-left: 32upx;
				padding-right: 32upx;

				.left_date_txt {
					color: #000000;
				}

				.edit_txt {
					color: #000000;
				}
			}

			.goods_list_box {
				width: 100%;
				height: 184upx;
				background: #FFFFFF;
				margin-bottom: 20upx;

				.goods_image {
					width: 162upx;
					height: 162upx;
					border-radius: 8upx;
					background-color: #666;
					margin-left: 32upx;

					.img {
						width: 162upx;
						height: 162upx;
						border-radius: 8upx;
					}
				}

				.goods_detail {
					margin-left: 20upx;

					.goods_title {
						width: 498upx;
						color: #333;
						display: -webkit-box;
						overflow: hidden;
						white-space: normal;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.bottom_price_cart {
						margin-top: 34upx;

						.price_txt {
							color: #000000;
						}

						.cart_icon {
							width: 56upx;
							height: 56upx;
						}
					}
				}
			}
		}
	}
</style>
<style>
	page {
		background-color: #f4f4f4;
	}
</style>
